<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>layout 管理系统大布局 - Layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <!-- Header -->
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">健身房管理</div>

    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          张三
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">修改密码</a></dd>
          <dd><a href="javascript:;">设置</a></dd>
          <dd><a href="javascript:;">退出</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  <!-- Aside -->
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item ">
          <a class="" href="javascript:;">课程管理</a>
          <dl class="layui-nav-child menu">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">教练管理</a>
          <dl class="layui-nav-child menu">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">场地管理</a>
          <dl class="layui-nav-child menu">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">平台管理</a>
          <dl class="layui-nav-child menu" data-src="system">
            <dd class="layui-this" data-src="user"><a href="javascript:;">用户管理</a></dd>
            <dd data-src="role"><a href="javascript:;">角色档案</a></dd>
            <dd><a href="javascript:;">公告管理</a></dd>
            <dd><a href="javascript:;">意见反馈</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
   <iframe src="./system/user/index.html" frameborder="0" width="100%" height="100%"></iframe>
  </div>
</div>
<script src="../layui/layui.js"></script>
<script>
//JS 
const $ = layui.$;
// 1.绑定点击事件 dd
// 2.点的是谁 -> 跳转到谁  给标签添加一个自定义属性 一般是用data-xx
$('.menu dd').on('click', function() {
  // console.log($(this).attr('data-src'));
  // console.log($(this).parent().attr('data-src')); // 拿到当前点击的父菜单的data-src
  // console.log($(this).attr('data-src')); // 拿到当前点击的子菜单的data-src
  // 一级菜单文件夹
  const parent = $(this).parent().attr('data-src');
  // 当前菜单的文件夹
  const child = $(this).attr('data-src');
  if (!child) return
  const src = './' + parent + '/' + child + '/index.html';
  $('iframe').attr('src', src);
  // console.log(src);
  
})
</script>
</body>
</html>